package eu.liquify {
	import eu.liquify.ui.Box;
	import eu.liquify.ui.Button;
	import eu.liquify.ui.Demonstration;
	import eu.liquify.ui.Label;
	import eu.liquify.ui.Layout;
	import eu.liquify.ui.ProgressBar;
	import eu.liquify.ui.ScrollablePanel;
	import eu.liquify.ui.Spinner;
	import eu.liquify.ui.TweenNano;
	import eu.liquify.ui.VBox;
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.utils.describeType;
	import flash.utils.getQualifiedClassName;
	import flash.utils.setTimeout;
	public class LiquifyComps extends Sprite {
		private var items:DisplayObject;
		
		private var time:Number = 0;
		private var demo:Demonstration;
		
		public var textboxBox:Box;
		public var scrollablePanel:ScrollablePanel;
		public var spinner:Spinner;
		public var spinnerBox:Box;
		public var multitabBox:Box;
		public var listboxBox:Box;
		public var bindingLabel:Label;
		public var rotationSpinner:Spinner;
		public var directBindingButton:Button;
		public var progressBar:ProgressBar;
		
		public var multipleBindingValue:Boolean;
		
		public function LiquifyComps() {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			var xml:XML =
			<comps>
				<panel>
					<vbox label="LiquifyComps" fitToGrid="false" lines="true" spacing="30">
						<multitabbox id="multitabBox" label="Multitab horizontal box" lines="true" spacing="15">
							<vbox label="Label" fitToGrid="false">
								<label label="Default label" />
								<hbox fitToGrid="false"><label label="50px" /><label label="truncated" fixedSize="true" width="50" debugSize="true" /></hbox>
								<hbox fitToGrid="false"><label label="46px" /><label label="truncated" fixedSize="true" width="46" debugSize="true" /></hbox>
								<hbox fitToGrid="false"><label label="45px" /><label label="truncated" fixedSize="true" width="45" debugSize="true" /></hbox>
								<hbox fitToGrid="false"><label label="30px" /><label label="truncated" fixedSize="true" width="30" debugSize="true" /></hbox>
								<hbox fitToGrid="false"><label label="25px" /><label label="truncated" fixedSize="true" width="25" debugSize="true" /></hbox>
								<hbox fitToGrid="false"><label label="24px" /><label label="truncated" fixedSize="true" width="24" debugSize="true" /></hbox>
								<hbox fitToGrid="false"><label label="10px" /><label label="truncated" fixedSize="true" width="10" debugSize="true" /></hbox>
							</vbox>
							<vbox label="Button (extends Label)" fixedWidth="true" width="135">
								<button label="Normal button" />
								<button label="Toggle button" toggle="true" />
								<button label="Selected toggle button" toggle="true" selected="true" />
							</vbox>
							<vbox label="TextBox (includes Label)" fixedWidth="true" width="150" fitToGrid="false">
								<vbox>
									<textbox label="Label" text="Value" />
									<textbox label="Label" text="Centered" centered="true" />
								</vbox>
								<vbox id="textboxBox" label="Layout types">
									<textbox layoutType="value" label="Fixed value size" text="Value" />
									<textbox layoutType="label" label="Label" text="Fixed label size" />
									<textbox layoutType="proportional" label="Proportional size" text="50 / 50" />
								</vbox>
							</vbox>
							<vbox id="spinnerBox" label="Spinner (extends Textbox)" gridWidth="150">
								<spinner id="spinner" label="Default spinner" />
								<spinner label="Min and max" min="5" max="35" />
								<spinner label="Step size" step="10" value="10" />
								<spinner label="Relative step" relativeStep="true" value="1000" />
							</vbox>
							<vbox label="Drop-down listbox">
								<listbox label="Default listbox">
									<item label="One" />
									<item label="Two" />
									<item label="Three" />
									<item label="Four" />
									<item label="Five" />
								</listbox>
								<listbox label="Pair default">
									<item label="One" />
									<item label="Two" />
								</listbox>
								<listbox label="Pair autoswitch" pairAutoSwitch="true">
									<item label="One" />
									<item label="Two" />
								</listbox>
								<vbox id="listboxBox" label="Layout types">
									<listbox layoutType="value" label="Fixed value size" ><item label="One" /><item label="Two" /></listbox>
									<listbox layoutType="label" label="Fixed label size" ><item label="One" /><item label="Two" /></listbox>
									<listbox layoutType="proportional" label="Proportional size" ><item label="One" /><item label="Two" /></listbox>
								</vbox>
							</vbox>
							<vbox label="Misc." fitToGrid="false">
								<vbox label="Color picker">
									<colorpicker label="Sun" color="0xFFFF00" />
								</vbox>
								<vbox label="Progress bar">
									<progressbar id="progressBar" />
								</vbox>
								<vbox label="TextInput">
									<textinput text="Just some input." />
								</vbox>
							</vbox>
						</multitabbox>
						<hbox fitToGrid="false" spacing="10">
							<scrollablepanel id="scrollablePanel" fixedWidth="true" width="400">
								<hbox label="Scrollable panel" fitToGrid="false">
									<vbox label="With multiple..." fixedWidth="true" width="200">
										<button label="Some filler buttons" />
										<button label="More" />
										<button label="MORE" />
										<button label="YES!!" />
										<button label="awkward" />
									</vbox>
									<vbox label="... vboxes">
										<button label="Lorem Ipsum" />
										<button label="Dolor" />
										<button label="Sit" />
										<button label="Awkward" />
									</vbox>
									<vbox label="mmm yes">
										<button label="tactical" />
										<button label="witty" />
										<button label="word" />
										<button label="insertion" />
									</vbox>
									<vbox label="push it">
										<button label="buttons" />
										<button label="turn" />
										<button label="me" />
										<button label="on" />
									</vbox>
									<vbox label="MORE BUTTONS">
										<button toggle="true" label="YES YES YES YES YES" />
										<button toggle="true" label="YES YES YES YES" />
										<button toggle="true" label="YES YES YES" />
										<button toggle="true" label="YES YES" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="MORE BUTTONS">
										<button toggle="true" label="YES YES YES YES" />
										<button toggle="true" label="YES YES YES" />
										<button toggle="true" label="YES YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="MORE BUTTONS">
										<button toggle="true" label="YES YES YES" />
										<button toggle="true" label="YES YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="MORE BUTTONS">
										<button toggle="true" label="YES YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="MO">
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
									</vbox>
									<vbox label="RE">
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" selected="true" />
									</vbox>
									<vbox label="MO">
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="RE">
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="MO">
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" selected="true" />
									</vbox>
									<vbox label="RE">
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" selected="true" />
									</vbox>
									<vbox label="MO">
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="RE">
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
									</vbox>
									<vbox label="MO">
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" />
										<button toggle="true" label="YES" selected="true" />
									</vbox>
									<vbox label="RE">
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
										<button toggle="true" label="YES" selected="true" />
									</vbox>
								</hbox>
							</scrollablepanel>
							<vbox label="Bindings (mostly one way)">
								<label label="[ binding output ]" id="bindingLabel" />
								<button label="Public function call" click="publicFunctionTest" />
								<button id="directBindingButton" label="Direct function binding" />
								<button label="Public getter/setter binding" toggle="true" click="publicGetterSetterTest" />
								<button label="Public label binding" toggle="true" click="bindingLabel.label" />
								<button label="Multiple binding targets" toggle="true" click="multipleBindingValue;multipleBindingTest" />
								<button label="Multiple binding targets - swapped" toggle="true" click="multipleBindingTest;multipleBindingValue" />
								<spinner label="Spinner label binding" change="bindingLabel.label" layoutType="value" fixedSize="false" />
								<spinner id="rotationSpinner" label="Spinner binding rotationY" change="rotationSpinner.rotationY" layoutType="value" fixedSize="false" />
								<colorpicker label="Color picker binding" change="bindingLabel.label" layoutType="value" fixedSize="false" />
								<textbox label="Textbox label binding" change="bindingLabel.label" layoutType="value" fixedSize="false" />
								<textinput text="TextInput binding" change="bindingLabel.label" />
							</vbox>
						</hbox>
					</vbox>
				</panel>
			</comps>
			
			items = Layout.parse(this, xml);
			if (items) addChild(items);
			
			directBindingButton.click = directBindingTest;
			
			scrollablePanel.addChild(new Button( { x: 100, label: "Demonstrate", click: runScrollableDemo } ));
			spinnerBox.addChild(new Button( { x: 100, label: "Demonstrate", click: runSpinnerDemo } ));
			multitabBox.addRawChild(new Button( { x: 150, label: "Demonstrate", click: runMultitabDemo } ));
			
			demo = new Demonstration();
			addChild(demo);
			
			//addChild(ConsoleUtil.instance);
			//ConsoleUtil.dock("bot");
			//ConsoleUtil.show();
			
			addEventListener(Event.ENTER_FRAME, run);
		}
		
		private function bindingPrint(o:Object):void {
			bindingLabel.label = ""+o;
		}
		
		
		
		public function publicFunctionTest():void {
			bindingPrint("Public function called");
		}
		private function directBindingTest():void {
			bindingPrint("Direct binding function called");
		}
		public function get publicGetterSetterTest():Boolean {
			return true;
		}
		public function set publicGetterSetterTest(v:Boolean):void {
			bindingPrint("Public setter called: "+v);
		}
		public function multipleBindingTest():void {
			bindingPrint("Multiple binding - "+multipleBindingValue);
		}
		
		
		private function runScrollableDemo():void {
			demo.showHorizontalDrag(scrollablePanel, new Point(130, 120));
		}
		private function runSpinnerDemo():void {
			demo.showHorizontalDrag(spinner, new Point(30, 10));
		}
		private function runMultitabDemo():void {
			demo.showDragSweep(multitabBox, new Point(20, 40), new Point(510, 40));
		}
		
		private function run(e:Event):void {
			textboxBox.gridWidth = 100+Math.sin(time*0.05)*50;
			textboxBox.resize();
			listboxBox.gridWidth = 90+Math.sin(time*0.05)*30;
			listboxBox.resize();
			progressBar.value = (Math.sin(time*0.01)*1.1+1)/2;
			time++;
		}
	}
}